<template>
<div class="check-progress" v-loading.fullscreen.lock="detailLoading">
    <div class="box-table">
        <el-table height="100%" v-loading="loading" :data="tableData" tooltip-effect="dark">
            <template slot="empty">
                <no-data :types="isSearch">
                    <span>暂无数据</span>
                </no-data>
            </template>
            <el-table-column prop="tableName" label="表名" show-overflow-tooltip></el-table-column>
            <el-table-column label="导入状态" show-overflow-tooltip>
                <template slot-scope="scope">
                    <el-tag :type="options[scope.row.jobStatus].status">{{options[scope.row.jobStatus].label}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column sortable prop="completeTime" label="完成时间" show-overflow-tooltip></el-table-column>
            <el-table-column prop="operUser" label="提交人" show-overflow-tooltip></el-table-column>
        </el-table>
        <div v-if="tableData.length>0" class="box-pagenation">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
        <data-detail v-if="dialogData.show" :dialogData="dialogData"></data-detail>
    </div>
</div>
</template>

<script>
import NoData from '@/components/NoData'
import DataDetail from './DataDetail'
import { mapGetters, mapMutations } from 'vuex'
export default {
    name: 'CheckProgress',
    computed: {
        ...mapGetters({
            projectId: 'common/getProjectId'
        })
    },
    components: { NoData, DataDetail },
    data () {
        return {
            detailLoading: false,
            loading: false,
            dialogData: {
                title: '',
                show: false,
                data: {}
            },
            form: {
                tableName: '',
                jobStatus: ''
            },
            options: [
                { label: '准备中', value: 0, status: 'info' },
                { label: '等待中', value: 1, status: 'info' },
                { label: '导入中', value: 2, status: 'warning' },
                { label: '已完成', value: 3, status: 'success' },
                { label: '失败', value: 4, status: 'danger' },
                { label: '用户终止', value: 5, status: 'danger' }
            ],
            isSearch: false,
            total: 0,
            pageSize: 10,
            currentPage: 1,
            tableData: [],
            timer: null
        }
    },
    created () {
        this.setHeaderBack('查看进度')
        this.init()
        this.timer = setInterval(() => {
            this.init()
        }, 10000)
    },
    methods: {
        ...mapMutations({
            setHeaderBack: 'common/setHeaderBack'
        }),
        init () {
            const params = {
                projectId: this.projectId,
                pageSize: this.pageSize,
                pageNum: this.currentPage,
                jobType: '200',
                ...this.form
            }
            this.$post('/dataSource/queryProgress', params).then(res => {
                if (res) {
                    const {
                        total,
                        rows
                    } = res
                    this.total = total
                    this.tableData = rows
                }
            })
        },
        search () {
            this.isSearch = true
            this.currentPage = 1
            this.init()
        },
        handleReset () {
            this.form = {
                tableName: '',
                jobStatus: ''
            }
            this.search()
        },
        handleCheck (item) {
            if (item.jobStatus === 3) {
                const params = {
                    tableName: item.tableName,
                    projectId: this.projectId
                }
                this.detailLoading = true
                this.$post('/dataSource/viewDataTable', params).then(res => {
                    if (res) {
                        res.summary.table = res.table
                        this.dialogData = {
                            title: item.tableName,
                            show: true,
                            data: res.summary
                        }
                    }
                }).finally(() => {
                    this.detailLoading = false
                })
            } else {
                this.$message.warning('此功能尚未开发，敬请期待!')
            }
        },
        handleCurrentChange (val) {
            this.currentPage = val
            this.init()
        },
        handleSizeChange (val) {
            this.pageSize = val
            this.init()
        }
    },
    destroyed () {
        window.clearInterval(this.timer)
    }
}
</script>
<style lang="less">
    .check-progress {
        height: 100%;
        overflow: hidden;
        .box-table {
            height: 100%;
        }
    }
</style>
